<html>
    <head>
        <title>自定义日历</title>
        <meta charset="UTF-8"/>
        <style>
            .column{
                width: 12%;
                display: inline-block;
            }
        </style>
        <link href="./calendar_component.css" rel="stylesheet"/>
        <script src="./calendar_component.js" type="text/javascript" ></script>
    </head>
    <body onload="init()">
        <div style="position: relative; height:400px">
            <div style="width:100%; height: 30px; background-color: white">
                <div id="last_month" onmouseover="lastMonthEnter(this)" onmouseout="lastMonthOut(this)" onclick="lastMonth()" style="z-index: 10;position: absolute; left: 15%; width: 0px; height: 0px; border-right-width: 30px; border-right-style: solid; border-right-color: gray; border-top: 15px solid transparent; border-bottom: 15px solid transparent;"></div>
                <div id="year_month" style="z-index: 9;position: absolute; width: 100%; height: 30px; text-align: center; line-height: 30px">2017-3</div>
                <div id="next_month" onmouseover="nextMonthEnter(this)" onmouseout="nextMonthOut(this)" onclick="nextMonth()" style="z-index: 10;position: absolute; right: 15%; width: 0px; height: 0px; border-left: 30px solid gray; border-top: 15px solid transparent; border-bottom: 15px solid transparent;"></div>
            </div>
            <div style="position: relative;width:100%; height: 370px; background-color:gainsboro; padding-top: 5px; padding-bottom: 5px">
                <div style="height:40px; text-align: center; line-height: 40px; position: relative">
                     <!--标题栏-->
                    <div class="column">星期天</div>
                    <div class="column">星期一</div>
                    <div class="column">星期二</div>
                    <div class="column">星期三</div>
                    <div class="column">星期四</div>
                    <div class="column">星期五</div>
                    <div class="column">星期六</div>
                </div>
                <div id="content" style="height: 320px; text-align:center; position: relative">
                    <div style="height:64px; text-align: center; line-height: 64px; position: relative;">
                        <!--1-->
                        <div id="day1" class="column"></div>
                        <div id="day2" class="column"></div>
                        <div id="day3" class="column"></div>
                        <div id="day4" class="column"></div>
                        <div id="day5" class="column"></div>
                        <div id="day6" class="column"></div>
                        <div id="day7" class="column"></div>
                    </div>
                    <div style="height:64px; text-align: center; line-height: 64px; position: relative;">
                        <!--2-->
                        <div id="day8" class="column"></div>
                        <div id="day9" class="column"></div>
                        <div id="day10" class="column"></div>
                        <div id="day11" class="column"></div>
                        <div id="day12" class="column"></div>
                        <div id="day13" class="column"></div>
                        <div id="day14" class="column"></div>
                    </div>
                    <div style="height:64px; text-align: center; line-height: 64px; position: relative;">
                        <!--3-->
                        <div id="day15" class="column"></div>
                        <div id="day16" class="column"></div>
                        <div id="day17" class="column"></div>
                        <div id="day18" class="column"></div>
                        <div id="day19" class="column"></div>
                        <div id="day20" class="column"></div>
                        <div id="day21" class="column"></div>
                    </div>
                    <div style="height:64px; text-align: center; line-height: 64px; position: relative;">
                        <!--4-->
                        <div id="day22" class="column"></div>
                        <div id="day23" class="column"></div>
                        <div id="day24" class="column"></div>
                        <div id="day25" class="column"></div>
                        <div id="day26" class="column"></div>
                        <div id="day27" class="column"></div>
                        <div id="day28" class="column"></div>
                    </div>
                    <div style="height:64px; text-align: center; line-height: 64px; position: relative;">
                        <!--5-->
                        <div id="day29" class="column"></div>
                        <div id="day30" class="column"></div>
                        <div id="day31" class="column"></div>
                        <div id="day32" class="column"></div>
                        <div id="day33" class="column"></div>
                        <div id="day34" class="column"></div>
                        <div id="day35" class="column"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>